<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="./js/HjjLayout.js" type="text/javascript" charset="UTF-8"></script>
		<link rel="stylesheet" type="text/css" href="./css/style.css"/>
	</head>
	<body>
		<!--
			待办事项程序：
			1.移动端为主，PC端可用
			2.输入框：输入待办事项
			3.未完成列表：显示未完成的内容，可以对每一项未完成内容进行修改（改为完成、删除）
			4.已完成列表：显示已完成内容，可以对每一项已完成内容进行修改（改为未完成，删除）
			
			制作顺序：
			1.html结构
			2.css样式
			3.JavaScript交互功能：
				输入框输入功能
				未完成列表显示功能
				完成列表显示功能
				修改和删除列表功能
		 -->
		 
		 <div class="main">
		 	<div class="header">
		 		<div class="logo">hjjTodo</div>
				<input id="input" type="text" placeholder="请输入待办事项" />
		 	</div>
			<div class="doing todo">
				<h3><span class="title">正在进行</span></h3>
				<div class="list">
					
				</div>
			</div>
			<div class="done todo">
				<h3><span class="title">已经完成</span></h3>
				<div class="list">
					
				</div>
			</div>
		 </div>
		 
		 <script type="text/javascript">
			if(localStorage.todoList == undefined){
				var todoList = [];
			}else{
				var todoList = JSON.parse(localStorage.todoList);
			}
			
			// 获取doing list对象
			var doingListDiv = document.querySelector('.doing .list')
			
			// 获取done list对象
			var doneListDiv = document.querySelector('.done .list')
			
			var mainDiv = document.querySelector('.main');
			
		 	var inputDom = document.querySelector('#input');
			// 监听输入事件
			inputDom.onkeydown = function(event){
				// 当按下回车键获取输入框内容并生成未完成列表
				if(event.key == 'Enter'){
					var value = inputDom.value;
					var objItem = {
						content:value,
						isDone:false
					};
					todoList.push(objItem);
					console.log(todoList);
					render(todoList);
					inputDom.value = '';
				}
			}
			
			function render(todoList){
				// 将对象转为json格式的字符串
				localStorage.todoList = JSON.stringify(todoList);
				// 每次渲染之前清空内容
				doingListDiv.innerHTML = '';
				doneListDiv.innerHTML = '';
				todoList.forEach(function(item,index){
					var todoItem = document.createElement('div');
					todoItem.className = 'todoItem';
					
					if(item.isDone){
						todoItem.innerHTML = `<input type="checkbox" checked="checked" data-index="${index}" />
						<div class="content">`+item.content+`</div>
						<div class="del" data-index="${index}">删除</div>`;
						doneListDiv.appendChild(todoItem);
					}else{
						todoItem.innerHTML = `<input type="checkbox" data-index="${index}" />
						<div class="content">`+item.content+`</div>
						<div class="del" data-index="${index}">删除</div>`;
						doingListDiv.appendChild(todoItem);
					}
				})
			}
			
			render(todoList);
			
			// 由父元素来代理各个todoItem
			doingListDiv.onchange = function(e){
				// console.log(e);
				// 通过事件对象找到dom对象，获取索引值
				var index = parseInt(e.target.dataset.index);
				// console.log(index);
				todoList[index].isDone = true;
				render(todoList);
			}
			doneListDiv.onchange = function(e){
				// console.log(e);
				// 通过事件对象找到dom对象，获取索引值
				var index = parseInt(e.target.dataset.index);
				// console.log(index);
				todoList[index].isDone = false;
				render(todoList);
			}
			
			mainDiv.onclick = function(e){
				if(e.target.className == 'del'){
					var index = parseInt(e.target.dataset.index);
					todoList.splice(index, 1);
					render(todoList);
				}
			}
		 </script>
	</body>
</html>
